<template>
  <v-list-group v-if="item.children && item.children.length" :value="true" class="cool-menu-group">
    <template #activator="{ props }">
      <v-list-item
        v-bind="props"
        :prepend-icon="item.icon"
        :title="item.menu_name"
        class="cool-menu-item"
      />
    </template>
    <MenuTree v-for="child in item.children" :key="child.menu_id" :item="child" />
  </v-list-group>
  <v-list-item
    v-else
    :prepend-icon="item.icon"
    :title="item.menu_name"
    :to="item.path"
    class="cool-menu-item"
  />
</template>

<script setup>
defineProps({ item: Object })
defineOptions({ name: 'MenuTree' })
</script>

<style scoped>
.cool-menu-item {
  border-radius: 8px;
  margin: 4px 8px;
  background: rgba(255,255,255,0.04);
  color: #e0e0e0 !important;
  font-weight: 500;
  transition: background 0.18s, color 0.18s;
  padding-left: 8px !important;
  padding-right: 0 !important;
}
.cool-menu-item:hover, .cool-menu-item.v-list-item--active {
  background: rgba(64,196,255,0.13) !important;
  color: #40c4ff !important;
}
.cool-menu-item .v-icon {
  color: #40c4ff !important;
  margin-right: 8px !important;
}
.cool-menu-group > .v-list-group__items {
  margin-left: 8px;
  border-left: 2px solid rgba(64,196,255,0.08);
}
</style> 